<template>
  <div class="pay">
    <div class="cartheader">
      <div class="container w">
        <div class="header-logo"></div>
        <div class="header-title">
          <h2>收银台</h2>
          <p>付款之后有小惊喜哦</p>
        </div>
      </div>
    </div>
    <div class="hr-20"></div>
    <div class="w">
      <div class="payNum pull-right">
        <span class="pull-right"></span>
        <span class="payTitle pull-right">订单金额：</span>
        <span class="payNumAll pull-right" v-if="order != ''"
          >¥{{ order.cart.price }}</span
        >
      </div>
      <div class="orderDetails">
        <ul>
          <li class="clearfix">
            <div class="label">订单号：</div>
            <div class="content">
              <span class="order-num">{{ order.orderid }}</span>
            </div>
          </li>
          <li class="clearfix">
            <div class="label">收货信息：</div>
            <div class="content" v-if="order != ''">
              {{ order.address.rvname }} {{ order.address.rvphone }}
              {{ order.address.rvregion.province.value }}
              {{ order.address.rvregion.city.value }}
              {{ order.address.rvregion.area.value }}
              {{ order.address.rvregion.deaddress }}
            </div>
          </li>
          <li class="clearfix">
            <div class="label">商品名称：</div>
            <div class="content">
              <div class="pays" v-if="order != ''">
                <span v-for="(item, index) in order.cart.cart" :key="index">
                  {{ item.jixing }}{{ item.verison }} {{ item.color }}</span
                >
              </div>
            </div>
          </li>

          <li class="clearfix">
            <div class="label">购买时间：</div>
            <div class="content">{{ order.buytime }}</div>
          </li>
        </ul>
      </div>
      <div class="btn">
        <button
          class="confirmPay"
          style="background: #d0bcbb"
          @click="CanSelOrder()"
        >
          取消订单
        </button>
        <button class="confirmPay" @click="PayOrder()">确认支付</button>
      </div>
    </div>
    <div class="mark" v-show="returnback">
      <div class="returnback">
        <h5 style="height: 32px">
          <i
            @click="returnback = !returnback"
            class="iconfont"
            style="
              float: right;
              color: burlywood;
              font-size: 28px;
              margin-top: -5px;
              cursor: pointer;
            "
            >&#xe62f;</i
          >
        </h5>
        <div class="re-title">
          <p>
            <i
              class="iconfont"
              style="
                font-size: 21px;
                color: #faad14;
                margin-right: 29px;
                margin-left: -53px;
              "
              >&#xe619;</i
            >您还未完成付款，请确认是否返回。
          </p>
        </div>
        <div class="re-btn">
          <el-button plain @click="Goshop()">返回购物</el-button>
          <el-button type="primary" @click="returnback = !returnback"
            >继续支付</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: "",
      returnback: false,
      isreturn: false,
    };
  },
  methods: {
    DeleteCart() {
      if (this.order != "") {
        this.axios.post("/cart/deleteCart", {
          cart: this.order.cart.cart,
        });
      }
    },
    Goshop() {
      this.isreturn = true;
      this.$router.push("/portal");
    },
    CanSelOrder() {
      this.axios
        .post("/order/addOrder", {
          order: this.order,
          userid: this.$store.getters.UserInfoID,
          key: "cansel",
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$store.commit("deleteOrder");
            this.isreturn = true;
            this.$router.push("/shopCart");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    PayOrder() {
      this.axios
        .post("/order/addOrder", {
          order: this.order,
          userid: this.$store.getters.UserInfoID,
          key: "pay",
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$store.commit("deleteOrder");
            this.$confirm("恭喜你，尊敬的用户，您已完成订单！", {
              confirmButtonText: "确定",
              cancelButtonText: "继续购物",
              type: "success",
            })
              .then(() => {
                this.isreturn = true;
                this.$router.push("/order");
              })
              .catch(() => {
                this.isreturn = true;
                this.$router.push("/shopCart");
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.order = this.$store.getters.getorder;
    this.$store.commit("deleteCart");
    this.DeleteCart();
  },
  beforeRouteLeave(to, from, next) {
    if (this.isreturn) {
      this.axios
        .post("/order/addOrder", {
          order: this.order,
          userid: this.$store.getters.UserInfoID,
          key: "waitpay",
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$store.commit("deleteOrder");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      next();
    } else {
      this.returnback = !this.returnback;
    }
  },
};
</script>

<style scoped>
@import url("../../../assets/fa/css/all.css");
@import url("../../../assets/css/base.css");

.mark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.returnback {
  /* display: block; */
  position: fixed;
  width: 440px;
  height: auto;
  padding-bottom: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eaeaea;
  background: #ffffff;
  z-index: 1009;
}
.re-title p {
  padding-left: 118px;
  font-size: 16px;
  color: #666666;
  letter-spacing: 0;
}
.re-btn {
  width: 200p;
  width: 211px;
  margin-top: 34px;

  margin-left: 118px;
}
.rebtn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-right: 10px;
}
.pay {
  font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
.cartheader {
  font-size: 12px;
  background: #fff;
  color: #b0b0b0;
  position: relative;
  z-index: 20;
  height: 100px;
  font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.container:before {
  content: " ";
  display: table;
}

.cartheader.header-logo {
  width: 93px;
  margin-top: 26px;
  float: left;
  height: 100%;
  display: block;
}

.header-logo .logo {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
}

.ir {
  display: block;
  text-align: left;
  text-indent: -9999em;
  overflow: hidden;
}

.cartheader .header-title {
  height: 48px;
  margin-left: 93px;
  margin-top: 26px;

  float: left;
}

.cartheader .header-title h2 {
  display: block;
  font-weight: 400;
  color: #424242;
  font-size: 28px;
  margin-bottom: 0;
  line-height: 48px;
  float: left;
}

.cartheader .header-title p {
  height: 20px;
  line-height: 20px;
  margin-top: 20px;
  margin-left: 15px;
  color: #757575;
  float: left;
  font-size: 12px;
}

.cartheader .header-bar {
  float: right;
}

.cartheader .header-bar .topbar-info {
  position: relative;
  float: right;
  height: 40px;
  line-height: 40px;
  margin-top: 30px;
  width: 300px;
  height: 48px;
  margin-left: 100px;
}
.payNumAll {
  font-size: 24px;
  color: #da3232;
  margin-right: 6px;
  font-weight: 600;
}
.payTitle {
  color: #000000;
  line-height: 20px;
  margin-top: 6px;
}
.orderDetails {
  position: relative;
  width: 100%;
}
.orderDetails ul {
  padding: 20px 0 0 0;
  margin-top: 10px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.orderDetails li {
  line-height: 24px;
  margin-bottom: 8px;
  color: #333;
}
.orderDetails .label {
  float: left;
  width: 85px;
}
.orderDetails .content {
  float: left;
}
.order-num {
  color: #ff6700;
}
.pays {
  width: 300px;
  display: flex;
  flex-direction: column;
}
.confirmPay {
  display: inline-block;
  width: 168px;
  line-height: 40px;
  padding: 0;
  font-size: 18px;
  text-align: center;
  border: none;
  cursor: pointer;
  background: #da3232;
  color: #ffffff;
  margin-right: 10px;
}
</style>